<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>构造函数</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .top{
                text-align: center;
            }
            button{
                padding: 0 20px;
            }
            #box{
                width: 600px;
                height: 600px;
                border: 5px solid black;
                margin: 50px auto 0;
                overflow: scroll;
            }

            li{
                text-align: center;
                border: 1px solid pink;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <label for="name">姓名</label>
            <input type="text" id="name" placeholder="请输入姓名">
            <label for="age">年龄</label>
            <input type="number" id="age" placeholder="请输入年龄">
            <label for="gender">性别</label>
            <input type="text" id="gender" placeholder="请输入性别">

            <button id="add">添加</button>
        </div>
        <ul id="box">

        </ul>
    </body>
</html>
<script>
    function people(name,age,gender) {
        // 创建一个空的对象
        var p={};
        p.name=name;
        p.age=age;
        p.gender=gender;
        return p;
    }

    // 创建一个空数组
    var pArr=[];


    // 获取输入框中的值
    var nameInput =document.getElementById('name');
    var ageInput =document.getElementById('age');
    var genderInput=document.getElementById('gender');

    // 获取添加按钮
    var  addBTN=document.getElementById('add');

    // 获取ul
    var boxUl= document.getElementById('box');

    // 添加点击事件
    addBTN.onclick =addBtnClicjAction;

    function addBtnClicjAction() {
        // 获取输入框中的值
        var name =nameInput.value;
        var age =ageInput.value;
        var gender =genderInput.value;

        var p=people(name,age,gender);

        // 往数组中添加元素
        pArr.push(p);

        // 展示数据
        showData();
    }

    // 展示数据
    function showData() {
        // 清除ul下面所有的li
        boxUl.innerHTML="";


        // 遍历数组
        for (var i=0;i<pArr.length;i++){
            // 取出数组中的对象
            var p =pArr[i];

            var str ="姓名："+p.name + ',性别：'+p.gender+",年龄："+p.age;

            // 创建元素
            var li=document.createElement("li");

            // 给li中的元素添加内容
            li.innerHTML=str;

            //拼接元素
            boxUl.appendChild(li);
        }

    }
</script>